﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--/*
    This file is part of Twitiriqui.

    Twitiriqui is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    Twitiriqui is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with Twitiriqui.  If not, see <http://www.gnu.org/licenses/>.
  
    Copyright 2009 Alberto Avila

*/
-->
<html>
	<head>
		<title></title>
		<style type="text/css">
            * {
                margin:0;
                padding:0;
            }
		    .roster {
		    	clear: both;
		    	width: 150px;
		    	text-align: center;
		    }

		    img {
		    	height: 34px;
		    	width: 34px;
                -ms-interpolation-mode:bicubic;
		    }
		    div.contactsBox {
		    	width: 150px;
		    }
		    span.contact {
		    	margin: 2px 2px 2px 2px;
		    	cursor: pointer;
		    }
		    #currentUser
		    {
		    	position: absolute;
		    }
		    #currentUserImage {
		    	width: 56px;
		    	height: 56px;
		    }
		</style>
		<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
		<script language="javascript" type="text/javascript">
	        $(document).ready(function () {
	            
	            $("#currentUser").hide ();
	            
	            $(document).mousemove(function(e) {
	                var x;
                    var contactsWidth = parseInt ($("div.contactsBox").css ("width"));
                    var imageWidth = parseInt ($("#currentUserImage").css ("width"));
	                if (e.pageX > (contactsWidth - imageWidth))
                        x = contactsWidth - imageWidth;
	                else
                        x = e.pageX;
                    $("#currentUser").css({
                        top: (e.pageY + 10)+ "px",
                        left: x + "px"
                    });
	            });
	        });	
		   
		    function addElement (imageUrl, nickname, type)
		    {
		        var content = 
		            "<span class='contact' nick='@nick'><img id='contact@nick' src='@url' alt=''/></span>"
		            .replace (/@nick/g, nickname)
                    .replace (/@url/g, imageUrl);

		    
		        $("div.contactsBox").append (content);
		        $("#contact" + nickname).mouseover (function () {
		            $("#currentUserImage").attr ("src", $(this).attr ("src"));
		            $("#currentUser").show ();
		        }).mouseout (function () {
		            $("#currentUser").hide ();

		        });
		    }
		</script>
	</head>
	<body>
        <div class="contactsBox"></div>
        <div id="currentUser">
            <img src="" alt="" id="currentUserImage" />
        </div>
	</body>
</html>